import React, { Component } from "react";
import FormItem from "./components/FormItem";
import "./index.less";
import { Table, Button } from "antd";
const columns = [
  { title: "部门名称", dataIndex: "name", align: "center" },
  { title: "国别", dataIndex: "country", align: "center" },
  { title: "数量", dataIndex: "number", align: "center" },
];
export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFormItem: false,
      formLayout: {
        labelCol: { span: 22 }, //控制label的宽度
        wrapperCol: { span: 22 }, //控制组件的宽度
      },
      formItem: [
        {
          type: "input",
          label: "部门名称",
          name: "name",
          rules: [{ required: true, message: "部门名称不能为空" }],
          placeholder: "请输入",
        },
        {
          type: "select",
          label: "国家",
          name: "country",
          options: [
            { id: 1, value: "china", countryName: "中国" },
            { id: 2, value: "usa", countryName: "美国" },
            { id: 3, value: "japan", countryName: "日本" },
          ],
          rules: [{ required: true, message: "国家不能为空" }],
          placeholder: "请选择",
        },
        {
          type: "inputNumber",
          label: "数量",
          name: "number",
          placeholder: "请输入",
          rules: [{ required: true, message: "人员数量不能为空" }],
        },
        {
          type: "TreeSelect",
          label: "树结构",
          name: "tree",
          placeholder: "请输入",
        },
      ],
      dataSource: [],
    };
  }
  onRef = (_this) => {
    this.FormItem = _this;
  };
  onFinish = (values) => {
    const dataSource = [
      {
        key: "1",
        name: values.name,
        country: values.country,
        number: values.number,
      },
    ];
    this.setState(
      {
        dataSource,
        showFormItem: false,
      },
      () => {
        // this.FormItem.formRef.current.resetFields();
      }
    );
  };
  addTableItem = () => {
    this.setState({
      showFormItem: true,
    });
  };
  editTableItem = () => {
    this.setState({
      showFormItem: true,
    });
  };
  cancelSubmit = () => {
    this.setState({
      showFormItem: false,
    });
  };
  render() {
    const { formItem, formLayout, dataSource, showFormItem } = this.state;
    return (
      <>
        <Button type="primary" onClick={this.addTableItem}>
          新增
        </Button>
        <Button
          type="primary"
          style={{ marginLeft: 20 }}
          onClick={this.editTableItem}
        >
          编辑
        </Button>
        <Table columns={columns} dataSource={dataSource} />
        {showFormItem && (
          <FormItem
            formItem={formItem}
            formLayout={formLayout}
            onFinish={this.onFinish}
            onRef={(_this) => {
              this.FormItemRef = _this;
            }}
            dataSource={dataSource}
            cancelSubmit={this.cancelSubmit}
          />
        )}
      </>
    );
  }
}
